<template>
  <div class="mask" v-if="visible" @click="handleMaskClick">
    <svg width="100%" height="100%" preserveAspectRatio="none">
      <!-- 遮罩层定义 -->
      <defs>
        <mask id="tourMask">
          <!-- 整个矩形遮罩（白色区域将显示遮罩下的内容） -->
          <rect width="100%" height="100%" fill="white" />
          <!-- 镂空区域（黑色区域将成为透明部分） -->
          <rect
            :x="pos.x"
            :y="pos.y"
            :width="pos.width"
            :height="pos.height"
            :rx="pos.rx || 4"
            :ry="pos.ry || 4"
            fill="black"
          />
        </mask>
      </defs>
      <!-- 应用遮罩的半透明背景 -->
      <rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.7)" mask="url(#tourMask)" />
      <!-- 镂空区域边框 -->
      <rect
        :x="pos.x"
        :y="pos.y"
        :width="pos.width"
        :height="pos.height"
        :rx="pos.rx || 4"
        :ry="pos.ry || 4"
        fill="none"
        stroke="#409eff"
        stroke-width="2"
      />
    </svg>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  // 目标位置
  pos: {
    type: Object,
    required: true,
    default: () => ({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      rx: 4,
      ry: 4
    }),
  },
  // 遮罩层是否可见
  visible: {
    type: Boolean,
    default: true
  },
  // 点击遮罩层是否隐藏
  maskClosable: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['close']);

const handleMaskClick = () => {
  if (props.maskClosable) {
    emit('close');
  }
};
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: auto;
}
</style>